<template>
  <div class="loading-page">
    <div class="animate-bottom"></div>
    <div class="container">
      <div class="uploader-wrap">
        <div class="uploader-label" for="photo" :style="{backgroundImage: ('url(' + photo + ')') || ''}"></div>
      </div>
      <div class="loading-text"></div>
    </div>
    <div class="school-icon-wrapper" :class="{'fade-in': fadeIn, 'fade-out': fadeOut}">
      <img class="school-icon" :src="icon">
    </div>
    <t-dialog v-show="visible" enter-text="返回选择" @enter="handleEnter">{{dialogText}}</t-dialog>
    <img :src="require('../assets/tabs/1.png')" class="hidden-img">
    <img :src="require('../assets/image/bg2.png')" class="hidden-img">
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
let interval
let timeout1, timeout2

export default {
  name: 'loadingPage',
  data () {
    return {
      icon: '',
      fadeIn: false,
      fadeOut: false,
      visible: false,
      dialogText: ''
    }
  },
  computed: {
    ...mapGetters(['faceId', 'correctFace', 'photo'])
  },
  components: {
    't-dialog': require('../components/Dialog.vue').default
  },
  created () {
    if (!this.photo) return this.$router.replace('/home')
    this.startAnimation()
    Promise.all([this.getRandomSchool(), this.getMergedFace()]).then(
      () => this.$router.replace('/confirm')
    ).catch(error => {
      if (error === '2001' || error === '2002' || (error + '').charAt(0) === '5' || isNaN(+error)) {
        window._hmt.push(['_trackEvent', '加载页', 'dialog', '出现服务器故障提示'])
        this.dialogText = '小猿出现故障惹，等会儿嗷'
      } else {
        window._hmt.push(['_trackEvent', '加载页', 'dialog', '出现网络罢工提示'])
        this.dialogText = '天啦噜，你的网络罢工了，请检查网络'
      }
      this.visible = true
    })
  },
  mounted () {
    new Image().src = require('../assets/image/share.png')
    new Image().src = require('../assets/image/qrcode.png')
  },
  methods: {
    ...mapActions([
      'getMergedFace',
      'getRandomSchool'
    ]),
    handleEnter () {
      this.$router.replace('/home')
    },
    startAnimation () {
      let next = this.$route.query.index
      const animate = () => {
        const randomSrc = [
          require('@/assets/schools/1.png'),
          require('@/assets/schools/2.png'),
          require('@/assets/schools/3.png'),
          require('@/assets/schools/4.png'),
          require('@/assets/schools/5.png'),
          require('@/assets/schools/6.png'),
          require('@/assets/schools/7.png'),
          require('@/assets/schools/8.png'),
          require('@/assets/schools/9.png'),
          require('@/assets/schools/10.png'),
          require('@/assets/schools/11.png'),
          require('@/assets/schools/12.png'),
          require('@/assets/schools/13.png'),
          require('@/assets/schools/14.png'),
          require('@/assets/schools/15.png'),
          require('@/assets/schools/16.png'),
          require('@/assets/schools/17.png')
        ]
        this.icon = randomSrc[next]
        let current = Math.floor(Math.random() * 17)
        // 如果随机的图标和上次一样，则重新随机
        while (current === next) {
          current = Math.floor(Math.random() * 17)
        }
        // 预加载下次需要使用的图标
        next = current
        new Image().src = randomSrc[next]
      }
      animate()
      // 提前200时渐现800渐隐
      timeout2 = setTimeout(() => {
        this.fadeOut = true
      }, 800)
      interval = setInterval(() => {
        this.icons = []
        this.fadeIn = true
        timeout1 = setTimeout(() => {
          this.fadeIn = false
        }, 200)
        timeout2 = setTimeout(() => {
          this.fadeOut = true
        }, 800)
        this.fadeOut = false
        animate()
      }, 1000)
    },
    clearAnimation () {
      interval && clearInterval(interval)
      timeout1 && clearTimeout(timeout1)
      timeout2 && clearTimeout(timeout2)
    }
  },
  destroyed () {
    // 跳转页面时销毁定时器
    this.clearAnimation()
  }
}
</script>

<style lang="scss" scoped>
  .loading-page {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    background: {
      image: url(~@/assets/image/loadingBg.png);
      size: cover;
      position: center;
    }
    .school-icon-wrapper {
      // animation: pop 1s infinite linear alternate;
      transform-origin: center center;
      &.fade-in {
        animation: fadeIn .5s;
      }
      &.fade-out {
        animation: fadeOut .5s;
      }
      .school-icon{
        position: absolute;
        display: block;
        width: 196px;
        height: 196px;
        z-index: 999;
        top: 24px;
        left: 50%;
        margin-left: -98px;
      }
    }
    .container {
      width:496px;
      margin:0 auto;
      z-index: 100;
      .uploader-wrap {
        position: relative;
        top:190px;
        width: 496px;
        height: 664px;
        // z-index: 10;
        background: {
          image: url(~@/assets/image/pic-bg.png);
          size: cover;
          position: center;
        };

        .uploader-label {
          position: absolute;
          width: 350px;
          height: 465px;
          top: 86px;
          left: 72px;
           background: {
            size: cover;
            position: center;
          };
        }
      }
      .loading-text{
        position: absolute;
        top:865px;
        left: 50%;
        margin-left: -99.5px;
        width: 199px;
        height: 50px;
        z-index: 10;
        background: {
          image: url(~@/assets/image/loadingText.png);
          size: cover;
          position: center;
        };
      }
    }
    .animate-bottom{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 945px;
      animation: bounce-top 3s infinite linear;
      background: {
        image: url(~@/assets/image/animate.png);
        size: 100%;
        position: center;
      }
    }
  }
    @keyframes bounce-top {
        0% {
          bottom: -945px;
        }
        100% {
          bottom: 0px;
        }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }
</style>
